<template>
  <div>
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>学分转换
      </div>
    </div>
    <div class="auto padding250">
        <!--<p class="title">学分转换</p>-->
        <div class="container">
          <img src="../../assets/progress.png" alt="">
          <div class="ceping_form">
            <Form ref="zhuanhuanForm1" :model="creditbank" :label-width="110" :rules="zhuanhuan1Rule">
              <FormItem label="姓名" prop="userName">
                <Input v-model="creditbank.userName" placeholder="请输入姓名" :maxlength="10"/>
              </FormItem>
              <FormItem label="性别" prop="sex" class="sex">
                <RadioGroup v-model="creditbank.sex" >
                  <Radio :label= 1 >女</Radio>
                  <Radio :label= 2 >男</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="出生年月" prop="birthday">
                <DatePicker type="date" placeholder="请选择" :maxlength="30" format="yyyy-MM-dd" :value="creditbank.birthday" @on-change="getBirthday"></DatePicker>
              </FormItem>
              <FormItem label="手机号" prop="mobile">
                <Input v-model="creditbank.mobile" placeholder="请输入手机号" disabled :maxlength="11"/>
              </FormItem>
              <FormItem label="身份证" prop="cardNo">
                <Input v-model="creditbank.cardNo" placeholder="请输入身份证号" :maxlength="18"/>
              </FormItem>
              <div class="upload">
                <div>
                  <Upload :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="cardFrontSuccess" :on-format-error="formatError">
                    <p v-if="creditbank.cardFront === ''"><img src="../../assets/id.png" alt="" width="187" height="95" ></p>
                    <p v-else><img :src="creditbank.cardFront" alt="" width="187" height="95" ></p>
                  </Upload>
                  <br>
                  身份证正面
                </div>
                <div>
                  <Upload :format="['jpg','jpeg','png']" :show-upload-list="false" :headers="{Authorization:token}" action="/base/file/upload" :max-size="3072" :on-exceeded-size="handleMaxSize"  :on-success="cardReverseSuccess" :on-format-error="formatError">
                    <p v-if="creditbank.cardReverse === ''"><img src="../../assets/id1.png" alt="" width="187" height="95" ></p>
                    <p v-else><img :src="creditbank.cardReverse" alt="" width="187" height="95" ></p>
                  </Upload>
                  <br>
                  身份证反面
                </div>
              </div>
              <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
              <FormItem label="国籍" prop="nationality">
                <Select v-model="creditbank.nationality" placeholder="请选择" style="text-align: left">
                  <Option :value="sta.code" v-for="sta in states" :key="sta.code" >{{sta.name}}</Option>
                </Select>
              </FormItem>
              <FormItem label="民族" prop="nation">
                <Select v-model="creditbank.nation" placeholder="请选择" style="text-align: left">
                  <Option :value="nat.code" v-for="nat in nation" :key="nat.code" >{{nat.name}}</Option>
                </Select>
              </FormItem>
              <FormItem label="政治面貌" prop="polStatus" >
                <Select v-model="creditbank.polStatus" placeholder="请选择" style="text-align: left">
                  <Option :value="pol.code" v-for="pol in politics" :key="pol.code">{{pol.name}}</Option>
                </Select>
              </FormItem>
              <FormItem label="教育程度" prop="eduDegree">
                <Select v-model="creditbank.eduDegree" placeholder="请选择" style="text-align: left">
                  <Option :value="edu.code" v-for="edu in educationList" :key="edu.code" >{{edu.name}}</Option>
                </Select>
              </FormItem>
              <FormItem label="学号" prop="studentNo">
                <Input v-model="creditbank.studentNo" placeholder="请输入学号" :maxlength="28"/>
              </FormItem>
              <FormItem label="城市" prop="areaId">
                <Select v-model="creditbank.areaId" placeholder="请选择" style="text-align: left">
                  <Option :value="cit.areaId" v-for="cit in city" :key="cit.code">{{cit.areaName}}</Option>
                </Select>
              </FormItem>
              <FormItem label="工作单位" prop="company">
                <Input v-model="creditbank.company" placeholder="请输入工作单位 " :maxlength="20"/>
              </FormItem>
              <FormItem label="部门" prop="deptName">
                <Input v-model="creditbank.deptName" placeholder="请输入部门" :maxlength="45"/>
              </FormItem>
              <FormItem label="职务/岗位" prop="positionName">
                <Input v-model="creditbank.positionName" placeholder="请输入职务/岗位" :maxlength="45"/>
              </FormItem>
              <FormItem label="职称" prop="profTitle">
                <Input v-model="creditbank.profTitle" placeholder="请输入职称" :maxlength="17"/>
              </FormItem>
              <FormItem label="行业类型" prop="trade">
                <Input v-model="creditbank.trade" placeholder="请输入行业类型" :maxlength="17"/>
              </FormItem>
              <FormItem label="固定电话" prop="phone">
                <Input v-model="creditbank.phone" placeholder="请输入固定电话" :maxlength="28"/>
              </FormItem>
              <FormItem label="QQ" prop="qq">
                <Input v-model="creditbank.qq" placeholder="请输入QQ" :maxlength="15"/>
              </FormItem>
              <FormItem label="电子邮箱" prop="email">
                <Input v-model="creditbank.email" placeholder="请输入电子邮箱" :maxlength="80"/>
              </FormItem>
              <FormItem label="邮政编码" prop="postcode">
                <Input v-model="creditbank.postcode"  ref="postcode1"  @on-keyup="validatePostcode" placeholder="请输入邮政编码" :maxlength="9"/>
              </FormItem>
              <FormItem label="通讯地址" prop="address">
                <Input v-model="creditbank.address"  placeholder="请输入通讯地址" :maxlength="245"/>
              </FormItem>
              <FormItem>
                <Button class="nextbtn" @click="next">下一步</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }


  form{
    width: 360px;
    margin:50px  0 0 50px ;
  }
  .title{
    font-size: 20px;
    color: #000;
    margin: 20px 0 25px 0;
    text-align: left;
    padding: 15px 20px ;
    background-color: #fff;
  }
  .sex .ivu-form-item-content{
    text-align: left;
  }
  .ceping_form .ivu-date-picker{
    width: 250px;
  }
  .container{
    background-color: #fff;
    padding: 50px 0;
    .sex{
      text-align: left;
      div{
        display: inline-block;
        margin-right: 30px;
        font-size: 14px;

        img{
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
    .upload{
      width: 715px;
      >div{
        display: inline-block;
        font-size: 12px;
        margin:0 35px 5px 0;
        text-align: center;
        cursor: pointer;
        p{
          width: 209px;
          height: 118px;
          border:1px solid #e1e1e1;
          padding: 10px 5px;
          img{
            object-fit: contain;
          }
        }
      }
    }
    .upload_tip{
      margin-bottom: 20px;
      color: #FF0000;
      padding-left: 20px;

    }
    .nextbtn{
      background-color: #957960;
      height: 55px;
      width: 221px;
      font-size: 18px;
      color: #fff;
      margin-left:-30px;
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {getStore} from "../../storage";
  import {updateCreditbank,scorePage,checkScore,centreInfoWeb,sliderPC} from '../../http'
  export default {
        name: '',
        props: {},
        data() {
            //自定义验证规则
            const birthdayRule = (rule,value,callback) => {
              if (this.creditbank.birthday === '' || this.creditbank.birthday === undefined) {
                callback(new Error());
              }else{
                callback();
              }
            };
            return {
              token:getStore('token'),
              sliderImg:'',
              creditbank:{
                id:'',            //编号
                userName:'',      //姓名
                sex:'',           //性别
                mobile:'',        //手机号
                birthday:'',      //出生日期
                cardNo:'',        //身份证号
                nationality:'',   //国籍
                nation:'',        //民族
                polStatus:'',     //政治面貌
                eduDegree:'',     //教育程度
                studentNo:'',     //学号
                areaId:'',        //城市
                company:'',       //工作单位（公司）
                deptName:'',      //部门
                positionName:'',  //职务，岗位
                profTitle:'',     //职称
                trade:'',         //行业类型
                phone:'',         //固定电话
                qq:'',            //QQ
                email:'',         //电子邮箱
                postcode:'',      //邮政编码
                address:'',       //通讯地址
                cardFront:'',     //身份证正面
                cardReverse:'',   //身份证反面
              },
              //下拉列表
              politics:'',        //政治面貌集合
              educationList:'',   //教育程度
              nation:'',          //民族
              city:'',            //城市
              states:'',          //国籍
              isSpinShow:false,

              zhuanhuan1Rule: {
                userName: [
                  { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                sex: [
                  { required: true, message: '请选择性别', trigger: 'blur',type: 'number' }
                ],
                birthday:[
                  {validator:birthdayRule,message: '请选择出生年月', trigger: 'blur'}
                ],
                email: [
                  // { required: true, message: '请输入您的邮箱', trigger: 'blur' },
                  {type: 'string',pattern : /^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/ ,message:'邮箱格式不正确',trigger:'blur'}
                ],
                cardNo: [
                  { required: true, message: '请输入身份证', trigger: 'blur' },
                  { type: 'string',pattern : /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ ,message:'身份证格式不正确',trigger:'blur'}
                ],
              }
            };
        },
        methods: {
          //上传证件超出大小2M限制
          handleMaxSize (file) {
            this.$Notice.warning({
              title: '证件上传失败',
              desc: '您上传的图片超过3M，无法上传。'
            });
          },
          //邮政编码输入为数字
          validatePostcode(){
              this.creditbank.postcode = this.$refs.postcode1.value.replace(/[^\d]{1,11}/g, "")
          },
          //生日
          getBirthday(value){
            this.creditbank.birthday = value;
          },
          //证书上传格式错误
          formatError(){
            this.$Notice.warning({
              title:"证件上传失败",
              desc:"图片格式错误，请上传图片",
              duration: 3,
            });
          },
          //身份证正面上传成功
          cardFrontSuccess(response){
            if(response.code === 200){
              this.$set(this.creditbank,'cardFront',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          //身份证返面上传成功
          cardReverseSuccess(response){
            if(response.code === 200){
              this.$set(this.creditbank,'cardReverse',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          next(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              this.$refs.zhuanhuanForm1.validate((valid) => {
                if (valid) {
                  if (this.creditbank.id === undefined || this.creditbank.id === '') {
                    updateCreditbank({
                      userName: this.creditbank.userName,
                      sex: this.creditbank.sex,
                      birthday: this.creditbank.birthday,
                      cardNo: this.creditbank.cardNo,
                      nationality: this.creditbank.nationality,
                      nation: this.creditbank.nation,
                      polStatus: this.creditbank.polStatus,
                      eduDegree: this.creditbank.eduDegree,
                      studentNo: this.creditbank.studentNo,
                      areaId: this.creditbank.areaId,
                      company: this.creditbank.company,
                      deptName: this.creditbank.deptName,
                      positionName: this.creditbank.positionName,
                      profTitle: this.creditbank.profTitle,
                      trade: this.creditbank.trade,
                      phone: this.creditbank.phone,
                      qq: this.creditbank.qq,
                      email: this.creditbank.email,
                      postcode: this.creditbank.postcode,
                      address: this.creditbank.address,
                      cardFront: this.creditbank.cardFront,
                      cardReverse: this.creditbank.cardReverse
                    }).then(res => {
                      this.isSpinShow = false;
                      if (res.code === 200) {
                        this.$router.push({
                          path: '/zhuanhuan2'
                        })
                      } else {
                        this.$Notice.warning({
                          title: "学分转换提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  } else {
                    updateCreditbank({
                      id: this.creditbank.id,
                      userName: this.creditbank.userName,
                      sex: this.creditbank.sex,
                      birthday: this.creditbank.birthday,
                      cardNo: this.creditbank.cardNo,
                      nationality: this.creditbank.nationality,
                      nation: this.creditbank.nation,
                      polStatus: this.creditbank.polStatus,
                      eduDegree: this.creditbank.eduDegree,
                      studentNo: this.creditbank.studentNo,
                      areaId: this.creditbank.areaId,
                      company: this.creditbank.company,
                      deptName: this.creditbank.deptName,
                      positionName: this.creditbank.positionName,
                      profTitle: this.creditbank.profTitle,
                      trade: this.creditbank.trade,
                      phone: this.creditbank.phone,
                      qq: this.creditbank.qq,
                      email: this.creditbank.email,
                      postcode: this.creditbank.postcode,
                      address: this.creditbank.address,
                      cardFront: this.creditbank.cardFront,
                      cardReverse: this.creditbank.cardReverse
                    }).then(res => {
                      this.isSpinShow = false;
                      if (res.code === 200) {
                        this.$router.push({
                          name: 'zhuanhuan2'
                        })
                      } else {
                        this.$Notice.warning({
                          title: "学分转换提醒",
                          desc: res.info,
                          duration: 3,
                        });
                      }
                    }).catch()
                  }
                } else {
                  this.isSpinShow = false;
                }
              })
            }
          },
          getScorePage(){
            //获取封面图
            sliderPC({sliderType:'5'}).then(res =>{
              this.sliderImg = res.data.slider.sliderImg;
            }).catch()
            scorePage().then(res => {
              this.isSpinShow = false;
              this.politics = res.data.politics;
              this.educationList = res.data.educationList;
              this.nation = res.data.nation;
              this.city = res.data.city;
              this.states = res.data.states;
              this.creditbank = res.data.basic;
              if(this.creditbank.sex == '' || this.creditbank == null || this.creditbank == undefined){
                this.creditbank.sex = 1;
              }
            }).catch()
          },
          getZhuanhuan1(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录，同时获取用户信息
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  checkScore().then(res => {
                    if (res.code === 200) {
                      if (res.data.isPass === 0 || res.data.isPass === 1) {
                        this.isSpinShow = false;
                        this.$router.push({
                          name: 'changeScore'
                        })
                      } else {
                        this.getScorePage();
                      }
                    } else {
                      this.$Notice.warning({
                        title: "学分转换提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '参与学分转换，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({
                    path: '/'
                  })
                }
              }).catch()
            }
          }
        },
        created() {
          // this.getZhuanhuan1()
          this.$router.push({
            name:'zhuanhuan'
          })
        },
      components: {
        headers,
        footers,
        carousel
      }
    }
</script>
